<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/stylesheets/index4.css">
    <link rel="stylesheet" href="/stylesheets/images/font_s8dkyktc6j1t6gvi/iconfont.css">
</head>

<body>
    <header>
        <h1><i class="blog">OUR BLOG</i></h1>
    </header>
    <nav>
        <div class="navcont">
            <div class="navpic"><img src="/stylesheets/images/art.jpg" alt=""></div>
            <div class="navbar">
                <h2><i>MY CARD</i></h2>
                <div class="card">
                    <p>网 名 :</p>
                    <p>职 业 :</p>
                    <p>电 话 :</p>
                    <p>Email :</p>
                </div>
                <div class="nav-butt">
                    <div class="home">
                        <a href="/">
                            <i id="font1" class="iconfont icon-wenzhang1"></i>
                            <p>文章</p>
                        </a>
                    </div>
                    <div class="artlist">
                        <a href="/index2"><i id="font" class="iconfont icon-iconfontindexb "></i>
                        <p>个人中心</p></a>
                    </div>
                    <div class="pictors">
                        <a href="/index3">
                            <i id="font2" class="iconfont icon-tupian"></i>
                            <p>相册</p>
                        </a>
                    </div>
                    <div class="msg">
                        <a href="#">
                            <i id="font3" class="iconfont icon-liuyan"></i>
                            <p>留言</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <main>
        <div class="main-cont">
            <div class="main-left">
              <form action="" method="post">
                <textarea name="liuyan" id="" placeholder="请留言"></textarea>
                <button type="submit">提交留言</button>
              </form>
              <div class="arts">
                <ul class="ping">
                    <% for(var i=0;i<qa.length;i++){ %>
                    <li>
                        <a href=""><img src="/stylesheets/images/k02.jpg"></a>
                        <div class="xing">
                             <h4>老王</h4>
                             <p><%= qa[i].liuyan %></p>
                        </div>
                    </li>
                    <% } %>
                </ul>
              </div>
            </div>
            <div class="main-right">
                <div class="reco-art">
                    <h3>推荐文章</h3>
                    <ul>
                      <% for(var i=0;i<qq.length;i++){ %>
                        <li><a href=""><%= qq[i].title %></a></li>
                     <% } %>
                    </ul>
                </div>
                <div class="gen-art">
                    <h3>文章分类</h3>
                    <ul>
                      <% for(var i=0;i<qq1.length;i++){ %>
                        <li><a href=""><%= qq1[i].tag %></a></li>
                        <% } %>
                    </ul>
                </div>
                <div class="music">
                    <img src="/stylesheets/images/pip.jpg" alt="">
                    <audio loop="loop" controls="controls" src="/stylesheets/music/没那么简单.mp3"></audio>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="footer">
            <div class="f-cont">
                <div class="link">
                    <h3>友情链接</h3>
                    <p><a href="">服务中心</a></p>
                    <p><a href="">服务中心</a></p>
                    <p><a href="">服务中心</a></p>
                </div>
                <div class="photos">
                    <h3>摄影作品</h3>
                    <div class="col">
                        <div>
                            <a href=""><img src="/stylesheets/images/01.jpg" alt=""></a>
                        </div>
                        <div>
                            <a href=""><img src="/stylesheets/images/02.jpg" alt=""></a>
                        </div>
                        <div>
                            <a href=""><img src="/stylesheets/images/03.jpg" alt=""></a>
                        </div>
                        <div>
                            <a href=""><img src="/stylesheets/images/04.jpg" alt=""></a>
                        </div>
                    </div>
                    <div class="col">
                        <div>
                            <a href=""><img src="/stylesheets/images/05.jpg" alt=""></a>
                        </div>
                        <div>
                            <a href=""><img src="/stylesheets/images/06.jpg" alt=""></a>
                        </div>
                        <div>
                            <a href=""><img src="/stylesheets/images/07.jpg" alt=""></a>
                        </div>
                        <div>
                            <a href=""><img src="/stylesheets/images/08.jpg" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <div class="copy"><a href="#">© 2017 © 3 © 30</a></div>
</body>
</html>
